import Vue from 'vue'
import VueRouter from 'vue-router'
import { getStorage } from '@/utils/storage'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: () => import('@/views/login') },
    // 二级路由，layout 布局组件
    {
      path: '/',
      redirect: '/dashboard',
      component: () => import('@/views/layout'),
      children: [
        { path: 'dashboard', component: () => import('@/views/dashboard') },
        { path: 'article', component: () => import('@/views/article') }
      ]
    }
  ]
})

// 对于像登录页面类似不需要权限 就可以访问的页面，我们统称为白名称
const whiteList = ['/login']

// 路由守卫，就是路由跳转之前 执行的钩子函数(在特定的时机自动执行的函数)
router.beforeEach((to, form, next) => {
  const token = getStorage()
  // 工作里面一般都是使用 if + return 语句 替换 if + else。 代码更清晰，层级只有一层
  // 代码优化
  if (token) {
    next()
    return
  }

  if (whiteList.includes(to.path)) {
    next()
    return
  }

  next('/login')
  // 不是去到任意页面都放行的，需要判断用户有没有登录， 如果登录过了就放放行，没有登录过就回退到之前的 登录页
  // 怎么样判断用户有没有登录过？ 看本地存储里面有没有token
  // if (token) {
  //   // 如果有token，证明登录过，可以直接放行
  //   next()
  // } else {
  //   // if (to.path === '/login') {
  //   if (whiteList.includes(to.path)) {
  //     // 这里还需要细分以下，如果访问的就是登录页面，直接放行。如果不放行next('/login)那么就会死循环
  //     // 官方术语叫 栈溢出
  //     next()
  //   } else {
  //     next('/login')
  //   }
  // }
})

export default router
